<template>
  <div>
    <div class="head">
      <div class="head-content">
        <img src="@/assets/img/logo.png" @click="logo" class="head-logo" />
        <div class="head-line"></div>
        <!-- \@mouseenter="mouseenter" @mouseleave="mouseleave" -->
        <div class="head-menu">
          <div
            class="head-menu-link"
            active-class="head-menu-link-active"
            @mouseenter="mouseenter(1)"
            @mouseleave="mouseleave(0)"
          >
            <div
              class="head-menu-link-name"
              @click="pushItem(1)"
              :class="headFlag == 1 ? 'head-menu-title-active' : ''"
            >
              <div>
                {{ $store.state.locale == "zh-cn" ? "热销产品" : "PRODUCTS" }}
              </div>
              <div class="index-head index-head-fiexed">
                <div class="index-head-body">
                  <div class="index-head-left">
                    <div class="index-head-left-head" style="color: white">产品中心</div>
                    <!-- <div class="index-head-left-txt">{{ text }}</div> -->
                  </div>
                  <div class="index-head-center1">
                    <div
                      @click="changeClassify(item.id)"
                      class="index-head-center-btn index-head-center-btn-r"
                      v-for="(item, key) in 3"
                      :key="key"
                    >
                      <!-- {{ item.name }} -->
                      <span>专业系列</span>
                    </div>
                    <!-- <div @click="changeClassify()" class="bg">
     
                      专业系列1
                    </div> -->
                    <!--                  <div class="index-head-center-btn">专业系列</div>
                                    <div class="index-head-center-btn index-head-center-btn-r">跑步系列</div>
                                    <div class="index-head-center-btn index-head-center-btn-r">校园系列</div>
                                    <div class="index-head-center-btn ">其他系列</div>
                                    <div class="index-head-center-btn index-head-center-btn-r">服装配件</div>-->
                  </div>
                  <!-- <img :src="textimg" class="index-head-cover" /> -->
                </div>
              </div>
            </div>
            <!-- <div
              style="z-index: 22; position: absolute; padding-top: 30px; top: 70px"
              :class="headFlag == 1 ? '' : 'head-menu-item-default'"
              v-show="flag == 1"
            >
              <div style="display: flex">
                <div
                  style="padding-bottom: 20px"
                  @click="navbarPush(1)"
                  :class="childrenFlag == 1 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                >
                  {{
                    $store.state.locale == "zh-cn" ? "专业田径" : "Professional Athletics"
                  }}
                </div>
                <div
                  @click="navbarPush(9)"
                  :class="childrenFlag == 2 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                >
                  {{
                    $store.state.locale == "zh-cn" ? "业余路跑" : "Amateur Road Running"
                  }}
                </div>
                <div
                  @click="navbarPush(7)"
                  :class="childrenFlag == 3 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                >
                  {{
                    $store.state.locale == "zh-cn" ? "考试体测" : "Exam Physical Testing"
                  }}
                </div>
              </div>
            </div> -->
          </div>
          <div
            class="head-menu-link"
            active-class="head-menu-link-active"
            @mouseenter="mouseenter(2)"
            @mouseleave="mouseleave(0)"
          >
            <div
              class="head-menu-link-name"
              @click="pushItem(2)"
              :class="headFlag == 2 ? 'head-menu-title-active' : ''"
            >
              {{ $store.state.locale == "zh-cn" ? "品牌故事" : "BRAND STORY" }}
            </div>
            <div
              style="
                z-index: 22;
                position: absolute;
                padding-top: 30px;
                top: 70px;
                color: white;
              "
              :class="headFlag == 2 ? '' : 'head-menu-item-default'"
              v-show="flag == 2"
            >
              <div style="display: flex">
                <div
                  :class="childrenFlag == 4 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/brand?nameId=11')"
                >
                  {{ $store.state.locale == "zh-cn" ? "品牌历史" : "Brand History" }}
                </div>
                <div
                  :class="childrenFlag == 5 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/brand?nameId=12')"
                >
                  {{ $store.state.locale == "zh-cn" ? "企业文化" : "Corporate Culture" }}
                </div>
                <div
                  :class="childrenFlag == 6 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/brand?nameId=13')"
                >
                  {{
                    $store.state.locale == "zh-cn" ? "社会责任" : "Social Responsibility"
                  }}
                </div>
              </div>
            </div>
          </div>
          <div
            class="head-menu-link"
            active-class="head-menu-link-active"
            @mouseenter="mouseenter(3)"
            @mouseleave="mouseleave(0)"
          >
            <div
              class="head-menu-link-name"
              @click="pushItem(3)"
              :class="headFlag == 3 ? 'head-menu-title-active' : ''"
            >
              {{ $store.state.locale == "zh-cn" ? "多威动态" : "DYNAMICS" }}
            </div>
            <div
              style="
                z-index: 22;
                position: absolute;
                padding-top: 30px;
                top: 70px;
                color: white;
              "
              :class="headFlag == 3 ? '' : 'head-menu-item-default'"
              v-show="flag == 3"
            >
              <div style="display: flex">
                <div
                  :class="childrenFlag == 7 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/dynamic?nameId=14')"
                >
                  {{
                    $store.state.locale == "zh-cn"
                      ? "赛事合作"
                      : "Competition Cooperation"
                  }}
                </div>
                <div
                  :class="childrenFlag == 8 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/dynamic?nameId=15')"
                >
                  {{ $store.state.locale == "zh-cn" ? "新闻活动" : "News and Events" }}
                </div>
              </div>
            </div>
            <!--            <div class="head-menu-link-line" v-if="urls == '/index/brand/index'"></div>-->
            <!--            <div class="index-head index-head-fiexed">
                          <div class="index-head-body">
                            <div class="index-head-left">
                              <div class="index-head-left-head">品牌文化</div>
                              <div class="index-head-left-txt">昆山多威体育用品有限公司创始于1983年，是一家有着三十多年坚持研发、生产各种体育运动比赛专用鞋为主诞生在江苏昆山本地的民营企业。</div>
                            </div>
                            <div class="index-head-center">
                              <div class="index-head-center-btn index-head-center-btn-r" @click="toPin(0)">企业介绍</div>
                              <div class="index-head-center-btn index-head-center-btn-r" @click="toPin(1)">企业文化</div>
                              <div class="index-head-center-btn index-head-center-btn-r" @click="toPin(2)">发展历程</div>
                              <div class="index-head-center-btn index-head-center-btn-r" @click="toPin(3)">企业责任</div>
                            </div>
                            <img src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/dw/fghf%20%403x.png" class="index-head-cover">
                          </div>
                        </div>-->
          </div>

          <div
            class="head-menu-link"
            active-class="head-menu-link-active"
            @mouseenter="mouseenter(4)"
            @mouseleave="mouseleave(0)"
          >
            <div
              class="head-menu-link-name"
              @click="pushItem(4)"
              :class="headFlag == 4 ? 'head-menu-title-active' : ''"
            >
              {{ $store.state.locale == "zh-cn" ? "多威科技" : "TECHNOLOGY" }}
            </div>
            <div
              style="
                z-index: 22;
                position: absolute;
                padding-top: 30px;
                top: 70px;
                color: white;
              "
              :class="headFlag == 4 ? '' : 'head-menu-item-default'"
              v-show="flag == 4"
            >
              <div style="display: flex">
                <div
                  :class="childrenFlag == 9 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/technology?nameId=16')"
                >
                  {{
                    $store.state.locale == "zh-cn"
                      ? "资质荣誉"
                      : "Qualification and Honor"
                  }}
                </div>
              </div>
            </div>
            <!--            <div class="head-menu-link-line" v-if="urls == '/index/dw/index'"></div>-->
          </div>
          <div
            class="head-menu-link"
            active-class="head-menu-link-active"
            @mouseenter="mouseenter(5)"
            @mouseleave="mouseleave(0)"
          >
            <div
              class="head-menu-link-name"
              @click="
                headFlag = 5;
                $router.push('/about');
              "
              :class="headFlag == 5 ? 'head-menu-title-active' : ''"
            >
              {{ $store.state.locale == "zh-cn" ? "联系我们" : "CONTACT" }}
            </div>
            <!-- <div
              style="z-index: 22; position: absolute; padding-top: 30px; top: 70px"
              :class="headFlag == 5 ? '' : 'head-menu-item-default'"
              v-show="flag == 5"
            >
              <div style="display: flex">
                <div
                  :class="childrenFlag == 10 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/about?nameId=17')"
                >
                  {{ $store.state.locale == "zh-cn" ? "门店地址" : "Store Address" }}
                </div>
                <div
                  :class="childrenFlag == 11 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/about?nameId=18')"
                >
                  {{
                    $store.state.locale == "zh-cn" ? "售后联系" : "After Sales Contact"
                  }}
                </div>
                <div
                  :class="childrenFlag == 12 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/about?nameId=19')"
                >
                  {{
                    $store.state.locale == "zh-cn" ? "意见反馈" : "Feedback on Opinions"
                  }}
                </div>
                <div
                  :class="childrenFlag == 13 ? 'head-menu-title-active' : ''"
                  class="head-menu-item-margin-right"
                  @click="$router.push('/about?nameId=20')"
                >
                  {{ $store.state.locale == "zh-cn" ? "社交媒体" : "Social Media" }}
                </div>
              </div>
            </div> -->
            <!--            <div class="head-menu-link-line" v-if="urls == '/index/about/index'"></div>-->
          </div>
          <!-- v-show="flag" -->

          <div
            v-show="flag != 1 && flag != 0 && flag != 5"
            style="
              position: absolute;
              width: 100vw;
              height: 72px;
              background: rgba(0, 0, 0, 0.7);
              left: 0;
              top: 72px;
              z-index: -1;
            "
          ></div>
        </div>
        <img
          src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/tianmao-%403x.png"
          class="head-icons"
          @click="clickConcat(2)"
        />
        <img
          src="https://jy-shops.oss-cn-beijing.aliyuncs.com/0dwgw/jingdong%403x.png"
          class="head-icons head-icons-r"
          @click="clickConcat(3)"
        />
        <div class="language_body">
          <el-dropdown placement="bottom" @command="commandClick">
            <div style="display: flex; align-items: center">
              <div style="width: 20px; height: 20px; margin-right: 15px">
                <img
                  src="@/assets/img/language.png"
                  style="width: 20px; height: 20px"
                  alt=""
                />
              </div>
              <span class="el-dropdown-link" style="color: white">
                {{ $t("message.language")
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            </div>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0">中文</el-dropdown-item>
              <el-dropdown-item command="1" divided>English</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { switchLocale } from "@/store/global";
export default {
  data() {
    return {
      headFlag: 0, //1是热销商品 2是品牌故事 3是多威动态 4是多威科技 5是联系我们
      flag: 0,
      childrenFlag: 0,
      toPath: "",
      config: {},
    };
  },
  created() {
    this.$router.beforeEach((to, from, next) => {
      this.toPath = to.path;
      if (this.toPath == "/index/goodsHot") {
        this.headFlag = 1;
      }
      if (this.toPath == "/index/brand") {
        this.headFlag = 2;
      }
      if (this.toPath == "/index/dynamic") {
        this.headFlag = 3;
      }
      if (this.toPath == "/index/technology") {
        this.headFlag = 4;
      }
      if (this.toPath == "/index/about") {
        this.headFlag = 5;
      }

      next();
    });
  },
  mounted() {
    this.getConfig();
  },
  watch: {
    $route(to, from) {
      console.log(typeof this.$route.query.nameId);
      switch (Number(this.$route.query.nameId)) {
        case 1:
          this.childrenFlag = 1;
          this.headFlag = 1;
          break;

        case 9:
          this.childrenFlag = 2;
          this.headFlag = 1;
          break;
        case 7:
          this.childrenFlag = 3;
          this.headFlag = 1;
          break;
        case 11:
          this.childrenFlag = 4;
          this.headFlag = 2;
          break;
        case 12:
          this.childrenFlag = 5;
          this.headFlag = 2;
          break;
        case 13:
          this.childrenFlag = 6;
          this.headFlag = 2;
          break;
        case 14:
          this.childrenFlag = 7;
          this.headFlag = 3;
          break;
        case 15:
          this.childrenFlag = 8;
          this.headFlag = 3;
          break;
        case 16:
          this.childrenFlag = 9;
          this.headFlag = 4;
          break;
        case 17:
          this.childrenFlag = 10;
          this.headFlag = 5;
          break;
        case 18:
          this.childrenFlag = 11;
          this.headFlag = 5;
          break;
        case 19:
          this.childrenFlag = 12;
          this.headFlag = 5;
          break;
        case 20:
          this.childrenFlag = 13;
          this.headFlag = 5;
          break;
      }

      // this.$nextTick(() => {
      //   this.getFlag();
      // });
      // 在mounted函数执行的方法，放到该处
      // 加载页面数据的方法
    },
  },
  methods: {
    pushItem(i) {
      this.headFlag = i;
      if (i == 1) {
        this.$router.push("/goodsHot");
      }
      if (i == 2) {
        this.$router.push("/brand");
      }
      if (i == 3) {
        this.$router.push("/dynamic");
      }
      if (i == 4) {
        this.$router.push("/technology");
      }
    },
    getConfig() {
      this.config = JSON.parse(localStorage.getItem("config"));
      console.log(this.config);
    },
    clickConcat(i) {
      if (i == 2) {
        //天猫
        window.open(this.config.tamll);
      } else {
        window.open(this.config.jingdong);
        //京东
      }
    },
    navbarPush(id) {
      this.$router.push("/goodsHot?nameId=" + id);
    },
    logo() {
      this.childrenFlag = 0;
      this.headFlag = 0;
      this.$router.push("/index");
    },
    //鼠标移入
    mouseenter(i) {
      this.flag = i;
    },
    //鼠标移除
    mouseleave(i) {
      this.flag = i;
    },
    commandClick(val) {
      if (val == 0) {
        switchLocale.call(this, "zh-cn");
        localStorage.setItem("language", "zh-cn");
      } else {
        switchLocale.call(this, "en");
        localStorage.setItem("language", "en");
      }
      this.$router.go(0);
      this.$forceUpdate();
    },
  },
};
</script>
<style scoped>
.head-menu-item-margin-right {
  margin-right: 30px;
  padding-bottom: 20px;
  position: relative;
}
/* .head-menu-item-margin-right:hover {
  font-weight: bold;

  border-bottom: 3px solid rgb(201, 29, 29);
} */
/* .head-menu-link-name {
    line-height: 74px;
    font-size: 17px;
    color: white;
    position: relative;
 
} */

.head-menu-item-margin-right::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  /* background: #000000; */
  border-bottom: 3px solid rgb(201, 29, 29);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 11;
  /* color: white; */
}

.head-menu-item-margin-right:hover {
  font-weight: bold;
  /* font-size: 17px; */
  /* border-bottom: 3px solid rgb(201, 29, 29); */
  position: relative;
  z-index: 20;
}

.head-menu-item-margin-right:hover:after {
  right: initial;
  left: 0;
  width: 100%;
}

.head-menu-item-margin-right:last-child {
  margin-right: 0;
}
</style>
